<template>
  <div>
    <NavigationBar title="编辑地址" arrow="true"></NavigationBar>
    <div style="padding-top:150rpx;">
      <van-cell-group>
        <van-field
          :value="name"
          label="收货人"
          placeholder="请输入收货人姓名"
          @change="handleName"
        />
        <van-field
          :value="mobile"
          label="手机号码"
          type="number"
          placeholder="请输入手机号码"
          @change="handleMobile"
        />
        <picker mode="region" @change="bindRegionChange" :value="area">
          <van-field
            :value="region"
            label="所在地区"
            disabled
            placeholder="请选择所在地区"
          />
        </picker>
         <van-field
          :value="detail_address"
          label="详细地址"
          type="textarea"
          placeholder="街道、楼牌号等"
          autosize
          @change="handleDetailAddress"
        />
        <van-switch-cell title="设为默认地址" :checked="default_address" @change="onChange"/>
      </van-cell-group>
      <div class="btn" @click="saveAddress()">保 存</div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
import NavigationBar from "@/components/navigationBar"
export default {
  components: {
    NavigationBar
  },
  data () {
    return {
      id:0,
      name:'',
      mobile:'',
      region:'',
      detail_address:'',
      area:[],
      default_address: false,
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ]),
  },
  methods: {
    handleName(e){
      this.name = e.mp.detail
    },
    handleMobile(e){
      this.mobile = e.mp.detail
    },
    handleDetailAddress(e){
      this.detail_address = e.mp.detail
    },
    bindRegionChange(e){
      this.area = e.mp.detail.value
      this.region = ''
      this.region = this.area[0] +' ' + this.area[1] +' ' + this.area[2]
    },
    onChange(event){
      this.default_address = event.mp.detail
    },
    saveAddress(){
      if (this.name == '') {
        wx.showToast({icon:'none',title:'收货人名字不能为空'})
        return
      }else if (this.mobile == '') {
        wx.showToast({icon:'none',title:'电话号码不能为空'})
        return
      }else if (this.area.length == 0) {
        wx.showToast({icon:'none',title:'请选择所在地区'})
        return
      }else if (this.detail_address == '') {
        wx.showToast({icon:'none',title:'详细地址不能为空'})
        return
      }
      if(!(/^1[34578]\d{9}$/.test(this.mobile))){ 
        wx.showToast({icon:'none',title:'手机号码有误，请重填'})
        return 
      } 
      let default_address = ''
      if (this.default_address) {
        default_address = 'Y'
      } else {
        default_address = 'N'
      }
      let form = {
        id:this.id,
        brand_id:this.user.brand_id,
        user_id:this.user.id,
        name: this.name,
        mobile: this.mobile,
        area: this.area,
        detail_address: this.detail_address,
        default_address: default_address
      }
      api.saveAddress(form).then(result=>{
        if (result.code == 0) {
          wx.showToast({
            title: '地址保存成功',
            icon: 'none'
          })
          wx.navigateBack({delta:1})
        }
      })
    }
  },
  async onLoad (options) {
    this.id = 0
    this.name = ''
    this.mobile = ''
    this.area = []
    this.detail_address = ''
    this.region = ''
    this.default_address = false

    if (options.id) {
      let result = await api.getAddress({id:options.id})
      if (result.code == 0) {
        let address = result.data
        this.id = address.id
        this.name = address.name
        this.mobile = address.mobile
        this.detail_address = address.detail_address
        this.area = address.area
        this.region = this.area[0] +' ' + this.area[1] +' ' + this.area[2]
        if (address.default_address == 'Y') {
          this.default_address = true
        } else {
          this.default_address = false
        }

      }
    }
  }
}
</script>

<style scoped>
.btn{
  height: 40px;
  line-height: 40px;
  width:95%;
  color: white;
  font-size: 15px;
  text-align: center;
  background: #feb3ba;
  border-radius: 5px;
  margin: 20px auto ;
}
</style>
